﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
 	*{ margin:0; padding:0; }
 	li{ list-style:none; }
 	img{ border:none; vertical-align:top; }
 	a{ text-decoration:none; }
 	body{ font-family:Helvetica,STHeiti,Droid Sans Fallback; }
 	#nav{ margin-top:10px; }
	#nav ul{ display:flex; flex-direction:row; 
		  justify-content:space-around; }
	#nav li{ width:30px; height:43px; font-size:12px; 
	  color:#999999; line-height:82px; }
	#nav li:nth-of-type(1){ background:url(1.png) no-repeat; }
	#nav li:nth-of-type(2){ background:url(2.png) no-repeat; }
	#nav li:nth-of-type(3){ background:url(3.png) no-repeat; }
	#nav li:nth-of-type(4){ background:url(4.png) no-repeat; }
	#nav li:nth-of-type(5){ background:url(5.png) no-repeat; }
	#nav li:nth-of-type(6){ background:url(6.png) no-repeat; }
</style>
</head>
<body>
<div id="nav">
	<ul>
    	<li>关注</li>
        <li>新闻</li>
        <li>小说</li>
        <li>视频</li>
        <li>糯米</li>
        <li>地图</li>
    </ul>
</div>
</body>
</html>
